<!-- start of Main Slider --> 
<section id="main_slider">
    <ul class="main_slider">
        <li> <img src="<?php echo base_url(); ?>front_end/images/banner-1.jpg" alt="Banner Image" /></li>
        <li> <img src="<?php echo base_url(); ?>front_end/images/banner-2.jpg" alt="Banner Image" /></li>
        <li> <img src="<?php echo base_url(); ?>front_end/images/banner-3.jpg" alt="Banner Image" /></li>
        <li> <img src="<?php echo base_url(); ?>front_end/images/banner-4.jpg" alt="Banner Image" /></li>
        <li> <img src="<?php echo base_url(); ?>front_end/images/banner-5.jpg" alt="Banner Image" /></li>
        <li> <img src="<?php echo base_url(); ?>front_end/images/banner-6.jpg" alt="Banner Image" /></li>
        <li> <img src="<?php echo base_url(); ?>front_end/images/banner-7.jpg" alt="Banner Image" /></li>
    </ul>
    <section class="banner_bottom_full" id="banner_ad">
        <section class="container">
            <section class="row">
                <article class="span8">
                    <div class="Archeé -spacer adv_banner">
                        <h4>HATC - an architectural company</h4>
                        <p> The work we have completed allows us to position ourselves as, experts in architectural design!</p>
                    </div>
                </article>
                <article class="span4">
                    <figure class="arch_banner">
                        <div class="banner_inner_cont"> <img class="architec-logo" src="<?php echo base_url(); ?>front_end/images/architec-logo.png" alt="" />
                            <p> Bắt đầu dự án mới, <br />
                                hãy gửi yêu cầu cho chúng tôi. </p>               
                        </div>
                    </figure>
                </article>
            </section>
        </section>
    </section>
</section>
<!-- End of Main Slider --> 
<!-- start of Feature Section -->
<section id="feature_holder" class="mbtm">
    <section class="container container-fluid">
        <section class="row-fluid">
            <figure class="feature span3"><a href="#"> <img src="<?php echo base_url(); ?>front_end/images/feature_1.png" alt="Feature" />
                    <h4>Dự toán thiết kế </h4></a>
            </figure>
            <figure class="feature span3"><a href="#"> <img src="<?php echo base_url(); ?>front_end/images/feature_2.png" alt="Feature" />
                    <h4> Phân tích dự án </h4></a>
            </figure>
            <figure class="feature span3"><a href="#">  <img src="<?php echo base_url(); ?>front_end/images/feature_3.png" alt="Feature" />
                    <h4>Thiết kế công trình</h4></a>
            </figure>
            <figure class="feature span3"><a href="#"> <img src="<?php echo base_url(); ?>front_end/images/feature_4.png" alt="Feature" />
                    <h4> Xây dựng </h4></a>
            </figure>
        </section>
    </section>
</section>
<!-- End of Feature Section --> 
<!-- Start of Feature Work Section -->
<section id="featured_work" class="mbtm">
    <section class="container">
        <section class="feature_title mbtm">
            <h2> Dự án HATC <span> // Các dự án nổi bật của HATC</span> </h2>
        </section>
        <section class="row">
            <Section class="span3"> 
                <!-- Filteration -->
                <div id="filter" class="sidebar_widget">
                    <ul id="work-filter" class="category-list">
                        <li class="active"><a data-filter="*" href="#">Tất cả dự án</a></li>
                        <?php foreach ($pcategories as $pcat){?>
                        <li><a data-filter=".<?php echo 'lst-cat-'.$pcat->id;?>" href="#"><?php echo $pcat->name;?></a></li>
                        <?php }?>                        
                    </ul>
                </div>
                <!-- end of Filteration --> 
                <!-- Testimonial Widget -->
                <figure class="testimonial sidebar_widget">
                    <div class="title-holder-1">
                        <h4>Khách hàng nói gì?</h4>
                    </div>
                    <ul id="testimonial_slider">
                        <li>
                            <div class="testi-text">
                                “ Thiết kế đẹp, thi công nhanh, chất lượng cao  </div>
                            <div class="texti-author">
                                <a href="#" class="testimonail-logo">
                                    <img src="<?php echo base_url(); ?>front_end/images/testimonial-logo.jpg" alt="" />
                                </a>
                                <figure class="logo-text">
                                    <p class="name">HungPV</p>
                                    <a href="http://www.company.com/"> www.company.com</a>
                                </figure>
                            </div>
                        </li>
                        <li>
                            <div class="testi-text">
                                “ Thiết kế đẹp, thi công nhanh, chất lượng cao   </div>
                            <div class="texti-author">
                                <a href="#" class="testimonail-logo">
                                    <img src="<?php echo base_url(); ?>front_end/images/testimonial-logo.jpg" alt="" />
                                </a>
                                <figure class="logo-text">
                                    <p class="name">Alan Steven</p>
                                    <a href="http://www.company.com/"> www.company.com</a>
                                </figure>
                            </div>
                        </li>
                    </ul>
                </figure>
                <!-- end of Testimonial Widget -->
            </section>
            <!-- Feature work Listing -->
            <Section class="span9">
                <ul class="work-list">
                    <?php foreach ($projects as $project){?>
                    <li class="featurework <?php echo 'lst-cat-'.$project->category_id;?>">
                        <figure>
                            <div class="block_holder">
                                <div class="hover_block flgallery"> <a href="#"><img src="<?php echo $project->image;?>" alt="" /></a>
                                    <div class="row_1a box"></div>
                                    <div class="row_1b box"></div>
                                    <div class="row_1c box"></div>
                                    <div class="row_1d box"></div>
                                    <div class="row_1e box"></div>
                                    <div class="row_2a box"></div>
                                    <div class="row_2b box"></div>
                                    <div class="row_2c box"></div>
                                    <div class="row_2d box"></div>
                                    <div class="row_2e box"></div>
                                    <div class="row_3a box"></div>
                                    <div class="row_3b box"></div>
                                    <div class="row_3c box"></div>
                                    <div class="row_3d box"></div>
                                    <div class="row_3e box"></div>
                                    <div class="row_4a box"></div>
                                    <div class="row_4b box"></div>
                                    <div class="row_4c box"></div>
                                    <div class="row_4d box"></div>
                                    <div class="row_4e box"></div>
                                    <div class="hover_info">
                                        <div class="mask"> <img src="<?php echo base_url(); ?>front_end/images/open_icon.png" alt="Explore" /> <a href="#"> SHOW GALLERY IN FULL SCREEN </a>
                                            <p> <?php echo $project->title;?></p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </figure>
                    </li>
                    <?php }?>
                </ul>
                <!-- End of Feature work Listing --> 
            </section>
        </section>
    </section>
</section>
<!-- End of Feature Work Section --> 
<!-- Start of Blog Section -->
<section id="blog_n" class="mbtm">
    <section class="container">
        <section class="feature_title mbtm">
            <h2> HATC - Công trình nổi bật <span> // Các công trình nổi bật của HATC</span> </h2>
        </section>
        <div id="aq-block-2" class="aq-block aq-block-aq_hslider_posts_block fifteen columns aq-first cf">
            <div class="wrap">
                <div class="scroll-box" data-boxed="1">
                    <div class="dragger">
                        <div class="grid">
                            <div class="gr-box n_blog_post"> <a href="blog_detail.html"> <img src="<?php echo base_url(); ?>front_end/images/blog_1.jpg" alt="blog Post" /> </a>
                                <div class="blog_summary">
                                    <h3> <a href="#"> Công trình nổi bật HATC </a> </h3>
                                    <div class="blog_meta"> September 01  | <a href="#"> 3 Comments </a> </div>
                                    <p> Công trình nổi bật HATC - thông tin vắn tắt các công trình HATC... </p>
                                </div>
                                <div class="blog_summary_footer"> <span class="pull-left"> <i class="icon-user "></i> <a href="#"> Andrew Peterson </a> </span> <span class="pull-right"> <i class="icon-link"></i> <a href="#"> Đọc tiếp </a> </span> </div>
                            </div>
                            <div class="gr-box n_blog_post"> <a href="blog_detail.html"> <img src="<?php echo base_url(); ?>front_end/images/blog_2.jpg" alt="blog Post" /> </a>
                                <div class="blog_summary">
                                    <h3> <a href="#"> Công trình nổi bật HATC </a> </h3>
                                    <div class="blog_meta"> September 01  | <a href="#"> 3 Comments </a> </div>
                                    <p> Công trình nổi bật HATC - thông tin vắn tắt các công trình HATC... </p>
                                </div>
                                <div class="blog_summary_footer"> <span class="pull-left"> <i class="icon-user "></i> <a href="#"> Andrew Peterson </a> </span> <span class="pull-right"> <i class="icon-link"></i> <a href="#"> Đọc tiếp </a> </span> </div>
                            </div>
                            <div class="gr-box n_blog_post"> <a href="blog_detail.html"> <img src="<?php echo base_url(); ?>front_end/images/blog_3.jpg" alt="blog Post" /> </a>
                                <div class="blog_summary">
                                    <h3> <a href="#"> Công trình nổi bật HATC </a> </h3>
                                    <div class="blog_meta"> September 01  | <a href="#"> 3 Comments </a> </div>
                                    <p> Công trình nổi bật HATC - thông tin vắn tắt các công trình HATC... </p>
                                </div>
                                <div class="blog_summary_footer"> <span class="pull-left"> <i class="icon-user "></i> <a href="#"> Andrew Peterson </a> </span> <span class="pull-right"> <i class="icon-link"></i> <a href="#"> Đọc tiếp </a> </span> </div>
                            </div>
                            <div class="gr-box n_blog_post"> <a href="blog_detail.html"> <img src="<?php echo base_url(); ?>front_end/images/blog_1.jpg" alt="blog Post" /> </a>
                                <div class="blog_summary">
                                    <h3> <a href="#"> Công trình nổi bật HATC </a> </h3>
                                    <div class="blog_meta"> September 01  | <a href="#"> 3 Comments </a> </div>
                                    <p> Công trình nổi bật HATC - thông tin vắn tắt các công trình HATC... </p>
                                </div>
                                <div class="blog_summary_footer"> <span class="pull-left"> <i class="icon-user "></i> <a href="#"> Andrew Peterson </a> </span> <span class="pull-right"> <i class="icon-link"></i> <a href="#"> Đọc tiếp </a> </span> </div>
                            </div>
                            <div class="gr-box n_blog_post"> <a href="blog_detail.html"> <img src="<?php echo base_url(); ?>front_end/images/blog_2.jpg" alt="blog Post" /> </a>
                                <div class="blog_summary">
                                    <h3> <a href="#"> Công trình nổi bật HATC </a> </h3>
                                    <div class="blog_meta"> September 01  | <a href="#"> 3 Comments </a> </div>
                                    <p> Công trình nổi bật HATC - thông tin vắn tắt các công trình HATC... </p>
                                </div>
                                <div class="blog_summary_footer"> <span class="pull-left"> <i class="icon-user "></i> <a href="#"> Andrew Peterson </a> </span> <span class="pull-right"> <i class="icon-link"></i> <a href="#"> Đọc tiếp </a> </span> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</section>
<!-- End of Blog Section--> 

<!-- Start of timeline -->
<section id="time_line_team">
    <section class="container container-fluid">
        <section class="row-fluid">
            <section class="span8">
                <section class="feature_title mbtm3">
                    <h2> Lịch sử HATC <span> // Câu chuyện đằng sau sự thành công</span> </h2>
                </section>
                <section class="time_line span9 first">
                    <div class="span12">
                        <section class="timeline">
                            <div id="timeline">
                                <div class="tl_bar"></div>
                                <div class="tl_bar2"></div>
                                <ul>
                                    <li><a href="#tabs-1">2011</a></li>
                                    <li><a href="#tabs-2">2012</a></li>
                                    <li><a href="#tabs-3">2013</a></li>
                                </ul>
                                <div id="tabs-1">
                                    <p class="tl_title"> <span class="cname">Inception of Arche’</span> - <span class="cnamei">architectural visualization company</span></p>
                                    <p> <i class="icon-quote-left"></i> <span class="parent">Donec sed odio duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. . Sed posuere consectetur est at lobortis.</span></p>
                                    <p>The company onec sed odio duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem neclit. Sed posuere consectetur est at lobortis.</p>
                                    <p>The company onec sed odio duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit est non commodo luctus. </p>
                                </div>
                                <div id="tabs-2">
                                    <p class="tl_title"> <span class="cname">Inception of Arche’</span> - <span class="cnamei">architectural visualization company</span></p>
                                    <p> <i class="icon-quote-left"></i> <span class="parent">Donec sed odio duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. . Sed posuere consectetur est at lobortis.</span></p>
                                    <p>The company onec sed odio duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem neclit. Sed posuere consectetur est at lobortis.</p>
                                    <p>The company onec sed odio duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit est non commodo luctus. </p>
                                </div>
                                <div id="tabs-3">
                                    <p class="tl_title"> <span class="cname">Inception of Arche’</span> - <span class="cnamei">architectural visualization company</span></p>
                                    <p> <i class="icon-quote-left"></i> <span class="parent">Donec sed odio duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. . Sed posuere consectetur est at lobortis.</span></p>
                                    <p>The company onec sed odio duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem neclit. Sed posuere consectetur est at lobortis.</p>
                                    <p>The company onec sed odio duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit est non commodo luctus. </p>
                                </div>
                            </div>
                        </section>
                    </div>
                </section>
                <section class="span3 first">
                    <div class="ico_list"> <img src="<?php echo base_url(); ?>front_end/images/project-ico.png" alt="" />
                        <p> 14 PROJECTS IN HAND</p>
                    </div>
                    <div class="ico_list"> <img src="<?php echo base_url(); ?>front_end/images/staff_ico.png" alt="" />
                        <p> 36 STAFF MEMBERS </p>
                    </div>
                </section>
            </section>
            <section class="team_widget span4">
                <?php echo Modules::run('members/home');?>
            </section>
        </section>
    </section>
</section>
<!-- end of timeline --> 
<!-- Start Client Slider -->
<section id="client_slider_Section" class="mbtm client_slider">
    <section class="container container-fluid">
        <section class="row-fluid">
            <section id="client_header">
                <h4> Doanh nghiệp liên kết </h4>
            </section>
            <ul id="client_slider">
                <li> <a href="#">
                        <div class="show_front"> <img src="<?php echo base_url(); ?>front_end/images/client_1.png" alt="Client Logo" /> </div>
                        <div class="show_back"> <img src="<?php echo base_url(); ?>front_end/images/client_1_h.png" alt="Client Logo" /> </div>
                    </a> </li>
                <li> <a href="#">
                        <div class="show_front"> <img src="<?php echo base_url(); ?>front_end/images/client_2.png" alt="Client Logo" /> </div>
                        <div class="show_back"> <img src="<?php echo base_url(); ?>front_end/images/client_2_h.png" alt="Client Logo" /> </div>
                    </a> </li>
                <li> <a href="#">
                        <div class="show_front"> <img src="<?php echo base_url(); ?>front_end/images/client_3.png" alt="Client Logo" /> </div>
                        <div class="show_back"> <img src="<?php echo base_url(); ?>front_end/images/client_3_h.png" alt="Client Logo" /> </div>
                    </a> </li>
                <li> <a href="#">
                        <div class="show_front"> <img src="<?php echo base_url(); ?>front_end/images/client_1.png" alt="Client Logo" /> </div>
                        <div class="show_back"> <img src="<?php echo base_url(); ?>front_end/images/client_1_h.png" alt="Client Logo" /> </div>
                    </a> </li>
                <li> <a href="#">
                        <div class="show_front"> <img src="<?php echo base_url(); ?>front_end/images/client_2.png" alt="Client Logo" /> </div>
                        <div class="show_back"> <img src="<?php echo base_url(); ?>front_end/images/client_2_h.png" alt="Client Logo" /> </div>
                    </a> </li>
            </ul>
        </section>
    </section>
</section>
<!-- End of Client Slider --> 
